<template>
  <div class="dashboard">
    <h1>课程教学总结管理系统</h1>
    <div class="dashboard-cards" v-loading="loading">
      <div class="card">
        <h2>我的总结</h2>
        <p>您在当前学期共有 {{ mySummaries }} 份总结</p>
        <button @click="navigateToSummaries">查看总结</button>
      </div>
      <div class="card" v-if="isResearchHead || isDepartmentHead">
        <h2>待审核总结</h2>
        <p>您有 {{ pendingReviews }} 份总结需要审核</p>
        <button @click="navigateToReview">去审核</button>
      </div>
      <div class="card" v-if="isAdmin">
        <h2>系统管理</h2>
        <p>管理用户、部门等系统数据</p>
        <button @click="navigateToAdmin">系统管理</button>
      </div>
    </div>
  </div>
</template>

<script>
import { ref, computed, onMounted } from 'vue';
import { useRouter } from 'vue-router';
import { useUserStore } from '@/stores/user';
import { getMyKcjxzj, getPendingAuditKcjxzj } from '@/api/course-teaching-summary';
import { getCurrentTerm } from '@/api/base-data';
import { ElMessage } from 'element-plus';

export default {
  setup() {
    const router = useRouter();
    const userStore = useUserStore();
    
    const mySummaries = ref(0);
    const pendingReviews = ref(0);
    const loading = ref(false);
    
    const isAdmin = computed(() => userStore.isAdmin);
    const isResearchHead = computed(() => userStore.isResearchHead);
    const isDepartmentHead = computed(() => userStore.isDepartmentHead);
    
    // 获取仪表板数据
    const fetchDashboardData = async () => {
      loading.value = true;
      try {
        // 并行获取数据以提高性能
        const promises = [
          getMyKcjxzj(), // 获取我的总结数据
          getCurrentTerm() // 获取当前学期
        ];
        
        // 如果有审核权限，添加获取待审核总结的请求
        if (isResearchHead.value || isDepartmentHead.value) {
          promises.push(getPendingAuditKcjxzj());
        }
        
        const results = await Promise.all(promises);
        const [myKcjxzjData, currentTermData, pendingAuditData] = results;
        
        // 处理我的总结数据 - 只统计当前学期的总结
        if (myKcjxzjData && currentTermData) {
          const currentTermId = currentTermData.id;
          const currentTermSummaries = myKcjxzjData.filter(summary => 
            summary.termId === currentTermId
          );
          mySummaries.value = currentTermSummaries.length;
        } else {
          mySummaries.value = 0;
        }
        
        // 处理待审核总结数据 - 显示全部学期的数据
        if (pendingAuditData && (isResearchHead.value || isDepartmentHead.value)) {
          pendingReviews.value = pendingAuditData.length;
        } else {
          pendingReviews.value = 0;
        }
        
      } catch (error) {
        console.error('获取仪表板数据失败:', error);
        ElMessage.error('获取数据失败，请刷新页面重试');
        // 出错时显示默认值
        mySummaries.value = 0;
        pendingReviews.value = 0;
      } finally {
        loading.value = false;
      }
    };
    
    onMounted(() => {
      fetchDashboardData();
    });
    
    const navigateToSummaries = () => {
      router.push('/kcjxzj/summary-browse');
    };
    
    const navigateToReview = () => {
      router.push('/kcjxzj/summary-audit-list');
    };
    
    const navigateToAdmin = () => {
      router.push('/admin/base-data/user');
    };
    
    return {
      mySummaries,
      pendingReviews,
      loading,
      isAdmin,
      isResearchHead,
      isDepartmentHead,
      navigateToSummaries,
      navigateToReview,
      navigateToAdmin,
      fetchDashboardData
    };
  }
};
</script>

<style scoped>
.dashboard {
  padding: 20px;
}

h1 {
  text-align: center;
  margin-bottom: 30px;
}

.dashboard-cards {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: center;
}

.card {
  background-color: #f9f9f9;
  border-radius: 8px;
  padding: 20px;
  width: 280px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

h2 {
  margin-top: 0;
  color: #333;
}

button {
  background-color: #007bff;
  color: white;
  border: none;
  padding: 8px 16px;
  border-radius: 4px;
  cursor: pointer;
  margin-top: 10px;
}

button:hover {
  background-color: #0056b3;
}
</style>
